<template>
    <y-dialog @open="open" @close='emit("close")' width="1000px" append-to-body>
        <el-row :gutter="20">
            <el-col :span="4" :xs="24">
                <el-card>
                    <el-tree :data="bindingOptions" :props="{ label: 'label', children: 'children' }"
                        :expand-on-click-node="false" :filter-node-method="filterNode" ref="bindingTreeRef"
                        highlight-current default-expand-all @node-click="handleNodeClick" />
                </el-card>
            </el-col>
            <el-col :span="20" :xs="24">
                <el-card>
                    <keep-alive>
                        <component :is='bindingComp' ref="bindingRef" />
                    </keep-alive>
                </el-card>
            </el-col>
        </el-row>
        <template #footer>
            <div class="dialog-footer">
                <el-button type="primary" @click="submit">确定</el-button>
                <el-button @click='emit("close")'>取消</el-button>
            </div>
        </template>
    </y-dialog>
</template>
  
<script setup name="StepBinding">
import ProtocolFieldBind from "@/views/rms/protocol/components/ProtocolFieldBind"
import PacketFieldBind from "@/views/rms/packet/components/PacketFieldBind"

const { proxy } = getCurrentInstance();

const emit = defineEmits(['submited', 'close'])

const step = ref({});
const bindingOptions = ref([
    { label: "协议资源" },
    { label: "报文资源" },
]);
const bindingComp = shallowRef(ProtocolFieldBind)

const props = defineProps({
    id: 1,
    type: '0'
})

/** 打开对话框事件 */
function open() {
    proxy.$refs.bindingRef.showSelection = false
    proxy.$refs.bindingRef.showToolBar = false
    proxy.$refs.bindingRef.handleQuery({});
}

/** 通过条件过滤节点  */
function filterNode(value, data) {
    if (!value) return true;
    return data.label.indexOf(value) !== -1;
}

function handleNodeClick(data) {
    switch (data.label) {
        case '报文资源':
            bindingComp.value = PacketFieldBind;
            break;
        default:
            bindingComp.value = ProtocolFieldBind;
            break;
    }
}

/** 提交按钮事件 */
function submit() {
    let binding = proxy.$refs.bindingRef.binding
    if (binding) {
        step.value = {
            id: props.id,
            binding: binding
        }
        proxy.$modal.msgSuccess("绑定成功");
        submited()
    } else {
        proxy.$modal.msgWarning("请先选中数据");
    }
};

/** submited事件 */
function submited() {
    emit('submited')
    emit('close')
}

/** Expose方法 */
defineExpose({
    step,
});
</script>